<template>
  <div class="image-compressor-page">
    <div class="compressor-container">
      <h1>图片压缩</h1>
      
      <div class="content-wrapper">
        <div class="upload-area" @click="uploadImage">
          <el-icon class="upload-icon"><Upload /></el-icon>
          <div class="upload-text">点击上传图片或拖拽图片到此处</div>
          <input 
            type="file" 
            ref="fileInput" 
            class="file-input" 
            @change="handleFileChange" 
            accept="image/*"
          >
        </div>

        <div class="compression-area">
          <img 
            v-if="imageUrl" 
            :src="imageUrl" 
            alt="预览图片" 
            class="image-preview"
          >
          <div v-if="imageUrl" class="compression-rate">
            <span>压缩率：</span>
            <el-slider 
              v-model="quality" 
              :min="0" 
              :max="100" 
              :step="1"
              :format-tooltip="value => `${value}%`"
            />
          </div>
          <div class="button-group">
            <el-button 
              type="primary" 
              @click="compressImage" 
              :disabled="!imageUrl"
            >
              <el-icon><Download /></el-icon>
              压缩图片
            </el-button>
            <el-button 
              type="success" 
              @click="downloadImage" 
              :disabled="!compressedImageUrl"
            >
              <el-icon><Download /></el-icon>
              下载压缩后的图片
            </el-button>
            <el-button @click="clearImage" v-if="imageUrl">
              <el-icon><Delete /></el-icon>
              清除图片
            </el-button>
            <el-button type="warning" @click="goToHomepage">
              <el-icon><Back /></el-icon>
              返回
            </el-button>
          </div>
        </div>
      </div>

      <div class="notes">
        <h3>帮助说明：</h3>
        <ul>
          <li>支持常见图片格式：JPG、PNG、WEBP等</li>
          <li>可以通过拖拽或点击上传图片</li>
          <li>使用滑块调节压缩率，数值越大压缩效果越明显</li>
          <li>压缩后的图片将转换为JPG格式</li>
          <li>所有操作在浏览器本地完成，不会上传服务器</li>
          <li>建议图片大小不超过10MB以获得最佳体验</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Upload, Download, Delete, Back } from '@element-plus/icons-vue'

const router = useRouter()
const fileInput = ref(null)
const imageUrl = ref('')
const compressedImageUrl = ref('')
const quality = ref(80)
const originalFileName = ref('')

const uploadImage = () => {
  fileInput.value.click()
}

const handleFileChange = (event) => {
  const file = event.target.files[0]
  if (!file) return

  if (file.size > 10 * 1024 * 1024) {
    ElMessage.warning('图片大小不能超过10MB')
    return
  }

  if (!file.type.startsWith('image/')) {
    ElMessage.error('请上传图片文件')
    return
  }

  imageUrl.value = URL.createObjectURL(file)
  compressedImageUrl.value = ''
  originalFileName.value = file.name
  ElMessage.success('图片上传成功')
}

const compressImage = () => {
  const img = new Image()
  img.src = imageUrl.value
  img.onload = () => {
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    canvas.width = img.width
    canvas.height = img.height
    ctx.drawImage(img, 0, 0, img.width, img.height)
    compressedImageUrl.value = canvas.toDataURL('image/jpeg', (100 - quality.value) / 100)
    ElMessage.success('图片压缩成功')
  }
}

const downloadImage = () => {
  if (!compressedImageUrl.value) return

  const link = document.createElement('a')
  link.href = compressedImageUrl.value
  const fileExtension = originalFileName.value.split('.').pop()
  link.download = `compressed_${originalFileName.value.replace(`.${fileExtension}`, '')}.jpg`
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  ElMessage.success('下载开始')
}

const clearImage = () => {
  imageUrl.value = ''
  compressedImageUrl.value = ''
  originalFileName.value = ''
  quality.value = 80
  if (fileInput.value) {
    fileInput.value.value = ''
  }
  ElMessage.success('已清除图片')
}

const goToHomepage = () => {
  router.push('/')
}
</script>

<style lang="scss" scoped>
.image-compressor-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;

  .compressor-container {
    max-width: 1000px;
    width: 96%;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    padding: 30px;
    box-sizing: border-box;
    margin: 10px auto;

    h1 {
      text-align: center;
      color: #4a5568;
      font-size: 28px;
      margin-bottom: 30px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }

    .content-wrapper {
      display: flex;
      gap: 20px;
      margin-bottom: 30px;

      @media (max-width: 768px) {
        flex-direction: column;
      }

      .upload-area {
        flex: 1;
        border: 2px dashed #dcdfe6;
        border-radius: 12px;
        text-align: center;
        cursor: pointer;
        padding: 20px;
        height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: all 0.3s ease;

        &:hover {
          border-color: #409EFF;
          background-color: rgba(64, 158, 255, 0.05);
        }

        .upload-icon {
          font-size: 48px;
          color: #8c939d;
          margin-bottom: 20px;
        }

        .upload-text {
          color: #606266;
          font-size: 14px;
        }

        .file-input {
          display: none;
        }
      }

      .compression-area {
        flex: 1;
        display: flex;
        flex-direction: column;

        .image-preview {
          max-width: 100%;
          max-height: 300px;
          margin: 0 auto 20px;
          border-radius: 8px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .compression-rate {
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          padding: 0 10px;

          span {
            margin-right: 10px;
            color: #606266;
          }

          .el-slider {
            flex-grow: 1;
          }
        }

        .button-group {
          display: flex;
          gap: 10px;
          flex-wrap: wrap;
          justify-content: center;

          .el-button {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 10px 20px;

            .el-icon {
              font-size: 16px;
            }
          }

          @media (max-width: 768px) {
            flex-direction: column;

            .el-button {
              width: 100%;
            }
          }
        }
      }
    }

    .notes {
      margin-top: 30px;
      padding: 20px;
      background-color: #f0f5ff;
      border-radius: 12px;
      color: #606266;
      text-align: left;

      h3 {
        color: #409EFF;
        margin: 0 0 15px 0;
        font-size: 16px;
        text-align: left;
      }

      ul {
        margin: 0;
        padding-left: 0;
        list-style-type: none;
        text-align: left;

        li {
          margin-bottom: 12px;
          line-height: 1.6;
          position: relative;
          padding-left: 18px;
          text-align: left;

          &:before {
            content: "•";
            color: #409EFF;
            font-size: 18px;
            position: absolute;
            left: 0;
            top: -2px;
          }

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .image-compressor-page {
    padding: 10px;

    .compressor-container {
      padding: 15px;
      border-radius: 15px;

      h1 {
        font-size: 24px;
        margin-bottom: 20px;
      }

      .content-wrapper {
        .upload-area {
          height: 200px;
          padding: 15px;

          .upload-icon {
            font-size: 36px;
          }
        }
      }

      .notes {
        padding: 15px;

        h3 {
          font-size: 15px;
        }

        ul li {
          font-size: 13px;
          margin-bottom: 8px;
        }
      }
    }
  }
}
</style>
